<template>
  <div
    :tabIndex="tabIndex"
    ref="list"
    class="m-filter_menu_list"
    @focus="handleFocus"
    @keydown.up.stop.prevent="activeMoveUp"
    @keydown.down.stop.prevent="activeMoveDown"
    @keyup.enter="selectCurrentActiveIndex"
    @keydown.tab.stop.prevent="({ shiftKey }) => !shiftKey && activeMoveDown()"
    @keyup.shift.tab.stop.prevent="activeMoveUp"
  >
    <div
      v-for="(item, index) in List"
      ref="item"
      :key="item"
      class="item"
      :class="{
        'z-on':
          (Array.isArray(CurrentIndex) && CurrentIndex.includes(index)) ||
          index === CurrentIndex,
        'z-active': index === CurrentActiveIndex,
      }"
      @click="select(index)"
    >
      <slot name="item" :item="item" :index="index" :showIcon="index === CurrentActiveIndex">
        <div class="f-toe" :title="showName(item)">{{ showName(item) }}</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    List: {
      type: Array,
      default: () => [],
    },
    CurrentIndex: {
      type: [Number, Array],
      default: -1,
    },
    FieldKey: {
      type: String,
    },
    tabIndex: {
      type: [String, Number],
      default: '0',
    },
    mountedToFocus: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      CurrentActiveIndex: -1,

      iniFocused: false,
    };
  },
  emit: ['select'],
  expose: [
    'activeMoveUp',
    'activeMoveDown',
    'selectCurrentActiveIndex',
    'focus',
    'focusAndActive',
  ],
  mounted() {
    // 默认聚焦为了键盘事件
    this.$nextTick(() => {
      if (this.mountedToFocus) {
        this.focus();
      }
    });
  },
  watch: {
    CurrentActiveIndex() {
      this.scrollActiveItemToVisibility();
    },
  },
  methods: {
    showName(item) {
      const { FieldKey } = this;
      return FieldKey ? item[FieldKey] : item;
    },

    // 聚焦并且初始化激活
    focusAndActive() {
      this.focus();
      this.CurrentActiveIndex = -1;
    },

    focus() {
      this.$refs.list.focus();
    },

    selectCurrentActiveIndex() {
      this.select(this.CurrentActiveIndex);
    },

    select(index) {
      const { List } = this;
      if (index < 0 || List.length == 0) return;
      this.$emit('select', List[index], index);
    },

    scrollActiveItemToVisibility() {
      const { CurrentActiveIndex, List } = this;
      if (CurrentActiveIndex < 0 || List.length == 0) return;

      this.$refs.item?.[CurrentActiveIndex]?.scrollIntoViewIfNeeded({
        behavior: 'smooth',
      });
    },

    // 激活上一个
    activeMoveUp() {
      const { CurrentActiveIndex, List } = this;
      const Len = List.length;
      if (Len == 0) {
        this.CurrentActiveIndex = -1;
      } else if (Len == 1) {
        this.CurrentActiveIndex = 0;
      } else {
        if (CurrentActiveIndex <= 0) {
          this.CurrentActiveIndex = Len - 1;
        } else {
          this.CurrentActiveIndex -= 1;
        }
      }
    },

    // 激活下一个
    activeMoveDown() {
      const { CurrentActiveIndex, List } = this;
      const Len = List.length;
      if (Len == 0) {
        this.CurrentActiveIndex = -1;
      } else if (Len == 1) {
        this.CurrentActiveIndex = 0;
      } else {
        if (CurrentActiveIndex >= Len - 1) {
          this.CurrentActiveIndex = 0;
        } else {
          this.CurrentActiveIndex += 1;
        }
      }
    },

    handleFocus() {
      if (!this.iniFocused && this.mountedToFocus) {
        this.iniFocused = true;
        if(this.CurrentIndex === -1||(Array.isArray(this.CurrentIndex) && this.CurrentIndex.length === 0)) {
         
          this.activeMoveDown();
        }
        //
      }
    },
  },
};
</script>

<style lang="scss">
.m-filter_menu_list {
  &:focus {
    outline: none;
  }

  .item {
    padding: 0 16px;
    line-height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all ease 0.1s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    margin-bottom: 1px;

    &:focus {
      outline: none;
    }

    &:hover,
    &:focus,
    &.z-active {
      background-color: #f0f2f5;
    }

    &.z-on {
      color: var(--t-color);
      background-color: #f0f2f5;

      &:hover,
      &:focus,
      &.z-active {
        background-color: #e6f2fb;
      }
    }
  }
}
</style>
